Mutation

提交mutation，是更動state的唯一方法，並以state為第一個參數。
包含事件類型(type)、回調函數(handler)，不可直接調用，需透過提交(commit)。

註冊Mutation於store.js

// type: addTodo
mutations: {
    // 業務邏輯
    addTodo (state) {
        // 新增待辦
        state.todoList.push({ id: 3, text: '待辦事項C', done: true });
    }
}

於元件中調用

store.commit('addTodo')

Payload(載荷)

提交時可帶入參數。

調整mutations.addTodo

mutations: {
    // 業務邏輯
    addTodo (state, todo) {
        // 新增待辦
        state.todoList.push(todo);
    }
}

調整元件
HTML

// 透過輸入框新增待辦
<input @keyup.enter="add" v-model="todo.text">
<h1>已完成 {{ totalDone }} 項</h1>
<li v-for="item in todoList" :key="item.id">
    {{ item.text }}
</li>

Data

data() {
    return {
      todo: {
        text: "",
        done: false
      }
    };
}

定義方法

methods: {
    add function(){
      this.todo['_id'] = this.totalDone +1 ;
      store.commit('addTodo', this.todo);
    } 
}

起前端測試

mapMutations

methods: {
    add: function () {
      this.todo["_id"] = this.totalDone + 1;
      this.addTodo(this.todo);
    },
    ...mapMutations([
      "addTodo", // store.commit('addTodo, this.todo);
    ]),
},

提醒 Mutation: 處理同步性動作

有錯誤請不吝指教!
參考資料
https://vuejs.org/v2/guide
https://medium.com/itsems-frontend/vue-vuex1-state-mutations-364163b3acac
https://ithelp.ithome.com.tw/articles/10185686
https://ithelp.ithome.com.tw/articles/10237349